<template>

  <div>
    <div class="margin-container-list">
      <!--顶部搜索 -->
      <div class="top-operate-default mar-t-20">
        <div class="search-item">
          <el-select class="select-class" v-model="textCol" style="width: 120px">
            <el-option label="税目编码" value="taxCode"></el-option>
            <el-option label="税目名称" value="taxName"></el-option>
          </el-select>
          <el-input @keyup.enter.native="handleSearch" v-model.trim="textValue" placeholder="请输入关键词"></el-input>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <!-- 增值税税目 -->
      <!--      <div>
        <el-tabs>
          <el-tab-pane label="增值税税目" name="1"></el-tab-pane>
        </el-tabs>
        <span class="font-blue mar-t-20 mar-b-20">增值税税目</span>
      </div> -->
      <div>
        <el-button type="primary" @click="openEditDialog(false)">添加税目</el-button>
        <el-button type="primary" @click="batchImportTaxVisible = true">导入</el-button>
      </div>
      <!--添加税目 弹窗 -->
      <el-container>
        <el-dialog :visible.sync='showTaxEdit' width="400px" v-el-drag-dialog :center="true"
          :title="taxEditDialogTitle">
          <el-form label-width="100px" :model="taxItem">
            <el-form-item label="税目编码" prop="taxCode">
              <el-input type="text" v-model="taxItem.taxCode" :disabled='isEdit'></el-input>
            </el-form-item>
            <el-form-item label="税目名称" prop="taxName">
              <el-input type="text" v-model="taxItem.taxName"></el-input>
            </el-form-item>
            <el-form-item label="税率" prop="taxRate">
              <el-input type="text" v-model="taxItem.taxRate"
                @blur="taxItem.taxRate = checkInputNum(taxItem.taxRate)">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input type="textarea" v-model="taxItem.description"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="save()">保存</el-button>
            <el-button @click="closeEditDialog()">取消</el-button>
          </div>
        </el-dialog>
      </el-container>

      <!-- 批量导入弹窗 -->
      <el-dialog width="700px" v-el-drag-dialog title="导入增值税税目" :visible.sync="batchImportTaxVisible">
        <el-form label-position="right" label-width="100px" style='width: 500px; margin-left:50px;'>
          <el-form-item label="导入文件" prop="importTaxFile">
            <div v-if="importFileName">{{importFileName}}</div>
            <el-upload class="upload-demo" ref="importOrder" name="files" action="/api/common/uploadFiles"
              :multiple="false" :show-file-list="false" :data="token" :before-upload="beforeUploadFile"
              :on-success="handleUploadSuccess">
              <el-button size="small" type="primary">选取文件</el-button>
            </el-upload>
            <span class="font-blue">
              <el-button @click="downloadTaxTemplate" type="text">下载导入模板</el-button>
            </span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="importTaxItems">确定</el-button>
          <el-button @click="batchImportTaxVisible = false">取消</el-button>
        </div>
      </el-dialog>

      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="taxList" v-loading="listLoading" element-loading-text="加载中"
          style="width: 100%">

          <el-table-column width="180px" label="税目编码" align="center" prop="taxCode"></el-table-column>
          <el-table-column width="180px" label="税目名称" align="center" prop="taxName"></el-table-column>
          <el-table-column width="200px" label="税率" prop="taxRate">
            <template slot-scope="scope" v-if="scope.row.taxRate">
              <div>{{scope.row.taxRate}}%</div>
            </template>
          </el-table-column>
          <el-table-column width="180px" label="描述" align="center" prop="description"></el-table-column>
          <el-table-column min-width="240px" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="openEditDialog(true,scope.row)">编辑</el-button>
              <el-button type="primary" @click="deleteTaxItems(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .select-class {
    margin-right: -5px;
    width: 110px;
  }
</style>

<script>
  import {
    downloadFile
  } from '@/api/common/common'
  import {
    getToken
  } from '@/utils/auth'
  import elDragDialog from '@/directive/el-dragDialog'
  import {
    pagingTaxItems,
    deleteTaxItems,
    saveTaxItems,
    importTax
  } from '@/api/warehouse/warehouseTaxItems'

  export default {
    directives: {
      elDragDialog
    },
    data() {
      return {
        total: 0,
        listLoading: false,
        enterpriseId: this.getEnterpriseId(),
        // 查询参数
        searchListQuery: {},
        defaultQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10
        },
        // 查询参数
        textCol: 'taxCode',
        textValue: '',
        dict: {},
        // 税目列表
        taxList: [],
        // 编辑税目弹窗
        showTaxEdit: false,
        // 保存参数
        taxItem: {
          enterpriseId: this.enterpriseId,
          taxItemsId: '',
          taxCode: '',
          taxName: '',
          taxRate: '',
          description: ''
        },
        // true为编辑
        isEdit: false,
        // 批量导入弹窗
        batchImportTaxVisible: false,
        // 导入的文件名称
        importFileName: '',
        importTaxFile: '',
        token: {},
        taxEditDialogTitle: '新增税目'
      }
    },
    // 初始化页面
    created() {
      this.token = {
        accessToken: getToken()
      }
      this.searchListQuery = {
        ...this.defaultQuery
      }
      this.pagingTaxItems()
    },
    mounted() {},
    methods: {
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.pagingTaxItems()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.pagingTaxItems()
      },
      setSearchListQuery() {
        // 搜索状态
        const currentPage = this.searchListQuery.currentPage
        const size = this.searchListQuery.size
        this.searchListQuery = {
          ...this.defaultQuery
        }
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.size = size
        this.searchListQuery[this.textCol] = this.textValue
      },
      pagingTaxItems() {
        this.listLoading = true
        // 设置查询参数
        this.setSearchListQuery()
        pagingTaxItems(this.searchListQuery).then(response => {
          if (response.isError) {
            return
          }
          this.total = response.data.total
          this.taxList = response.data.records
          this.dict = response.data.dict
          this.listLoading = false
        })
      },
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.pagingTaxItems()
      },
      // 重置参数
      resetSearch() {
        this.searchListQuery = {
          ...this.defaultQuery
        }
        this.searchListQuery = {}
        this.textValue = ''
        this.pagingTaxItems()
      },
      // 删除
      deleteTaxItems(row) {
        this.$confirm('此操作将删除税目，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteTaxItems(row.taxItemsId).then(response => {
            if (response.isError) return
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.pagingTaxItems()
          })
        }).catch(() => {})
      },
      openEditDialog(isEdit, row) {
        this.isEdit = isEdit
        if (!isEdit) {
          this.taxEditDialogTitle = '新增税目'
          // 新增
          this.showTaxEdit = true
          this.taxItem = {}
        } else {
          this.taxEditDialogTitle = '编辑税目[' + row.taxName + ']'
          // 不可编辑税目编码
          this.isEdit = true
          this.showTaxEdit = true
          Object.assign(this.taxItem, row)
        }
      },
      // 关闭弹窗
      closeEditDialog() {
        this.showTaxEdit = false
      },
      // 保存
      save() {
        this.taxItem.enterpriseId = this.getEnterpriseId()
        saveTaxItems(this.taxItem).then(response => {
          if (response.isError) {
            return
          }
          // 关闭弹窗 清除数据
          this.showTaxEdit = false
          this.pagingTaxItems()
        })
      },
      // 批量导入税目
      importTaxItems() {
        if (!this.importTaxFile) {
          this.$message.error('请上传导入文件')
          return
        }
        importTax({
          enterpriseId: this.getEnterpriseId(),
          fileUrl: this.importTaxFile
        }).then(response => {
          if (response.isError) return
          this.importFileName = ''
          this.batchImportTaxVisible = false
          this.pagingTaxItems()
        })
      },
      beforeUploadFile(file) {
        const ext = file.name.substring(file.name.lastIndexOf('.') + 1)
        if (ext !== 'xlsx') {
          this.$message.error('请上传xlsx格式的Excel文件')
          return false
        }
        return true
      },
      handleUploadSuccess(res, file) {
        if (res.code !== 101) {
          this.$message.error(res.msg)
          return
        }
        this.importTaxFile = res.data[0]
        this.$message({
          type: 'success',
          message: '文件已上传'
        })
      },
      // 导入税目模板
      downloadTaxTemplate() {
        downloadFile('https://veekrayimg.joinsun.vip/upload/4e8288996c50d8b5fb910034ee66713f.xlsx', {}, '增值税税目模板')
      }
    }
  }
</script>
